<!--
 * @Author: 刘霁雯
 * @Description: 首页
 -->
<template>
    <div>
        <cli-title-customer></cli-title-customer>
        <div class="main">
            <div class="search">
                <div class="searchLogo">
                    <div class="logo">
                        <img src="../../../assets/image/icon.png">
                    </div>
                </div>
                <el-input placeholder="今天想要淘点什么？" v-model="searchBox" class="searchBox">
                </el-input>
                <el-button style="background-color: rgba(245,152,149,0.7);" slot="append" icon="el-icon-search" @click="search(searchBox)"></el-button>
            </div>
            <div class="slide">
                <el-carousel :interval="2000" arrow="always" height="400px">
                        <el-carousel-item style="background-color: #ffffff">
                            <img src="../../../assets/image/home1.png">
                        </el-carousel-item>
                        <el-carousel-item style="background-color: #ffe8c0">
                            <img src="../../../assets/image/home2.png">
                        </el-carousel-item>
                        <el-carousel-item style="background-color: #ffffff">
                            <img src="../../../assets/image/home3.png">
                        </el-carousel-item>
                </el-carousel>
            </div>
            <div style="margin-top: 5%;margin-bottom: 5%">
                <el-divider content-position="center">
                    <div style="float: top;margin-left: 30%">
                        <img src="../../../assets/image/icon.png">
                    </div>
                    <div style="float: bottom">
                        <h2 style="color:rgb(22, 22, 22)">热卖单品</h2>
                    </div>
                </el-divider>
            </div>
            <product-list :list="1" :title="1" :pro-list="proList"></product-list>
            <div style="margin-top: 5%;margin-bottom: 5%">
                <el-divider content-position="center">
                    <div style="float: top;margin-left: 15%">
                        <img src="../../../assets/image/icon.png">
                    </div>
                    <div style="float: bottom">
                        <h2 style="color:rgb(22, 22, 22)">服装</h2>
                    </div>
                </el-divider>
            </div>
            <product-list :list="1" :title="1" :pro-list="clothList"></product-list>
            <div style="margin-top: 5%;margin-bottom: 5%">
                <el-divider content-position="center">
                    <div style="float: top;margin-left: 15%">
                        <img src="../../../assets/image/icon.png">
                    </div>
                    <div style="float: bottom">
                        <h2 style="color:rgb(22, 22, 22)">食品</h2>
                    </div>
                </el-divider>
            </div>
            <product-list :list="1" :title="1" :pro-list="foodList"></product-list>
            <div style="margin-top: 5%;margin-bottom: 5%">
                <el-divider content-position="center">
                    <div style="float: top;margin-left: 15%">
                        <img src="../../../assets/image/icon.png">
                    </div>
                    <div style="float: bottom">
                        <h2 style="color:rgb(22, 22, 22)">电子</h2>
                    </div>
                </el-divider>
            </div>
            <product-list :list="1" :title="1" :pro-list="electList"></product-list>
            <div style="margin-top: 5%;margin-bottom: 5%">
                <el-divider content-position="center">
                    <div style="float: top;margin-left: 30%">
                        <img src="../../../assets/image/icon.png">
                    </div>
                    <div style="float: bottom">
                        <h2 style="color:rgb(22, 22, 22)">生活用品</h2>
                    </div>
                </el-divider>
            </div>
            <product-list :list="1" :title="1" :pro-list="lifeList"></product-list>
            <br>
            <br>
            <br>
        </div>

    </div>
</template>

<script>
    import CliTitleCustomer from "../../../components/base/cliTitleCustomer";
    import ProductList from "../../../components/base/productList";
    import POST from "../../../api/POST"
    import API from "../../../api"
    import Cookie from "js-cookie"

    export default {
        components: {ProductList, CliTitleCustomer},
        data () {
            return {
                list:1,
                title:1,
                searchBox:'',
                proList:[],
                foodList:[],
                lifeList:[],
                clothList:[],
                electList:[]
            }
        },
        created () {
            this.getDataList()
        },
        methods: {
            getDataList() {
                API.allProduct().then(res => {
                    this.proList = res
                })
                API.food().then(res => {
                    this.foodList = res
                })
                API.cloth().then(res => {
                    this.clothList = res
                })
                API.electronic().then(res => {
                    this.electList = res
                })
                API.life().then(res => {
                    this.lifeList = res

                })
            },
            search(search) {
                let routeUrl = this.$router.resolve({
                    path: "/search",
                    query: {search: search}
                });
                window.open(routeUrl.href, '_blank');
            }
        }
    }
</script>
<style scope>
    .main {
        width: 100%;
        position: absolute;
        right: 0;
        left: 0;
        top: 65px;
        margin: auto;
    }
    .searchLogo {
        float: left;
        margin-left: 22%;
        margin-right: 2%;
        color: rgb(245, 110, 20);
    }
    .searchBox {
        width: 50%;
        margin-right: 40px;
    }
    .slide {
        margin-top: 1%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }

</style>
